<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>添加就诊人</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<script type="text/javascript" src="../../js/init.js"></script>
		<link rel="stylesheet" href="../../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<script type="text/javascript" src="../../font/iconfont.js"></script>
		<style type="text/css">
			html {
				width: 100%;
				height: 100%;
				background-color: #f6f6f6;
			}
			
			.cons {
				padding: 0.12rem 0.2rem 0;
			}
			
			.cons .con {
				position: relative;
				font-size: 0.3rem;
				color: #333;
				margin-top: 0.26rem;
				height: 0.82rem;
				background-color: #fff;
				line-height: 0.82rem;
			}
			
			.cons .con .Name {
				position: absolute;
				left: 0.26rem;
			}
			
			.cons .con input {
				border: none;
				padding-left: 1.56rem;
				width: 100%;
			}
			
			button {
				background-color: #428bca;
				color: #fff;
				text-align: center;
				line-height: 0.88rem;
				height: 0.88rem;
				width: 7.06rem;
				margin-left: 0.22rem;
				border: none;
				border-radius: 0.1rem;
			}
			select {
				padding: 5px 0;
			}
			.outer {
				width: 500px;
				margin: 20px auto;
			}
			.name {
				width: 1.56rem;
				display: inline-block;
			}
			.cons .con form input {
				display: inline-block;
				width: 1.00rem;
			}
			.cons .con form {
				padding-left: 1.2rem;
			}
		</style>
	</head>

	<body>
		<header>
			<span></span>
			<text class="title">添加就诊人</text>
			<text class="iconfont icon-llmainpageback" id="back"></text>
			<text class="iconfont icon-iconfontclosesmall"></text>
			<text class="iconfont icon-gengduo"></text>
		</header>
		<section class="cons">
			<div class="con">
				<text class="Name">姓名</text>
				<input type="text" name="" id="" value="" placeholder="请输入您的真实姓名" />
			</div>
			<div class="con">
				<text class="Name">性别：</text>
				<form action="">
					<input type="radio" name="sex" checked="checked" value="男" />男
					<input type="radio" name="sex" id="" value="女" />女
				</form>
			</div>
			<div class="con">
				<text class="Name">身份证</text>
				<input type="text" name="" id="" value="" placeholder="请输入您的身份证号" />
			</div>
			<div class="con">
				<text class="name"></text>
				<text class="Name">地址</text>
				<select name="province" id="province">
					<option value="请选择">请选择</option>
				</select>
				<select name="city" id="city">
					<option value="请选择">请选择</option>
				</select>
				<select name="town" id="town">
					<option value="请选择">请选择</option>
				</select>
			</div>
			
			<div class="con">
				<text class="Name">手机号</text>
				<input type="text" name="" id="" value="" placeholder="请输入您的手机号" />
			</div>
			<div class="con">
				<text class="Name">医疗卡录入</text>
			</div>
		</section>
		<button>添加</button>
	</body>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/area.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		document.getElementById("back").onclick = function() {
			window.history.back(-1);
		}
		var province = $("#province"),
			city = $("#city"),
			town = $("#town");
		for(var i = 0; i < provinceList.length; i++) {
			addEle(province, provinceList[i].name);
		}

		function addEle(ele, value) {
			var optionStr = "";
			optionStr = "<option value=" + value + ">" + value + "</option>";
			ele.append(optionStr);
		}

		function removeEle(ele) {
			ele.find("option").remove();
			var optionStar = "<option value=" + "请选择" + ">" + "请选择" + "</option>";
			ele.append(optionStar);
		}
		var provinceText, cityText, cityItem;
		province.on("change", function() {
			provinceText = $(this).val();
			$.each(provinceList, function(i, item) {
				if(provinceText == item.name) {
					cityItem = i;
					return cityItem
				}
			});
			removeEle(city);
			removeEle(town);
			$.each(provinceList[cityItem].cityList, function(i, item) {
				addEle(city, item.name)
			})
		});
		city.on("change", function() {
			cityText = $(this).val();
			removeEle(town);
			$.each(provinceList, function(i, item) {
				if(provinceText == item.name) {
					cityItem = i;
					return cityItem
				}
			});
			$.each(provinceList[cityItem].cityList, function(i, item) {
				if(cityText == item.name) {
					for(var n = 0; n < item.areaList.length; n++) {
						addEle(town, item.areaList[n])
					}
				}
			});
		});
	</script>

</html>